<template>
    <div class="container-fluid ">

        <KeepAlive :max="2">
            <div class="box-bg">
                <div class="img-box">
                    <div v-if="imgShow.bgImg">
                        <div class="bg-img3" :style="`background-image: url(${userStore.Detials.background_image})`"></div>
                        <div class="bg-img2" :style="`background-image: url(${userStore.Detials.background_image})`"></div>
                    </div>
                    <div v-else>
                        <div class="bg-img3"></div>
                        <div class="bg-img2"></div>
                    </div>

                    <div class="bg-img1">

                        <div>
                            <button type="button" @click="goHome()" class="btn return-btn"><img
                                    src="../assets/biogr/return.svg" alt="return"><span>&nbsp;{{ $t('biographyPage.goHome')
                                    }}</span></button>
                            <button type="button" @click="goLoginOut()" class="btn exit-btn   btn-outline-light"><img
                                    src="../assets/biogr/exit.svg" alt="return"><span>&nbsp;{{ $t('biographyPage.logOut')
                                    }}</span></button>
                                    
                            <div @click="pullProgram()" class=" pro-btn">
                                        <img src="../assets/biogr/programs.svg"/>
                            </div>
                        </div>
                        <div>
                            <!-- 头像行 -->
                            <div class="font-box-1">
                                <div class="circular-img">
                                    <div v-if="imgShow.avatar" :style="`background-image: url(${userStore.Detials.avatar})`"
                                        class="top-icon">

                                    </div>
                                    <div v-else>
                                        <img src="../assets/icons/favsion.png" alt="">
                                    </div>

                                </div>
                                <div class="detil-box">
                                    <p>{{ userStore.Detials.nickname }}</p>
                                    <span>{{ userStore.Detials.email }}</span>
                                    <br>
                                    <span>{{ userStore.Detials.introduction }}</span>
                                </div>

                            </div>
                            <!-- 标签行 7个最多-->
                            <div class="font-box-2" v-if="userStore.Detials.career_tags">
                                <div v-for="career in userStore.Detials.career_tags.split(',')" :key="career">
                                    <div class="career-cards"><span>{{ career }}</span></div>
                                </div>

                            </div>
                            <!-- 按钮行 -->
                            <div class="font-box-3">
                                <div @click="pullArticle()">
                                    <img src="../assets/biogr/add.svg" />
                                </div>

                                <p class="badge rounded-pill text-bg-light">{{ $t('biographyPage.create')
                                }}{{ articleStore.articleList.list.length }}</p>

                                <button type="button" class="btn btn-outline-light" @click="userEditorShow = true">{{
                                    $t('biographyPage.personalInformation') }}</button>                               
                                
                            </div>
                            

                        </div>
                    </div>

                </div>
                <br>
                <br>
                <div class="select-box">
                    <div class="line-box-show" @click="getArticlesList()">
                        <h5>{{ $t('biographyPage.personalWorks') }}</h5>
                    </div>
                </div>

                <!-- 资料填写 -->
                <div v-show="userEditorShow">
                    <div class="mask" @click="userEditorShow = !userEditorShow"></div>
                    <div class="card-input toast-box">
                        <div class="d-grid gap-2 ">
                            <div>{{ $t('biographyPage.personalInformation') }}</div>
                            <input type="text" class="form-control" v-model="userEditForm.nickname"
                                :placeholder="$t('biographyPage.nicName')" aria-describedby="inputGroup-sizing-default">
                            <input type="text" class="form-control" v-model="userEditForm.introduction"
                                :placeholder="$t('biographyPage.introduction')"
                                aria-describedby="inputGroup-sizing-default">
                            <input type="text" class="form-control" v-model="userEditForm.career_tags"
                                :placeholder="$t('biographyPage.career')" aria-describedby="inputGroup-sizing-default">

                            <label for="formFile" class="form-label">{{ $t('biographyPage.avatar') }}</label>
                            <input @change="uploadFile('avatar')" id="avatar_file" class="form-control" type="file"
                                ref="avatarREF">

                            <label for="formFile" class="form-label">{{ $t('biographyPage.bgImg') }}</label>
                            <input @change="uploadFile('bgImg')" id="bgImg_file" class="form-control" type="file"
                                ref="bgimageREF">

                        </div>

                        <br><br>
                        <div style="display: flex;   align-items: center;
                justify-content: space-between;">
                            <div @click="upLoaduserForm()">
                                <img src="../assets/icons/ok-blue.svg" alt="yes" style="width: 30px;">
                            </div>
                            <div @click="userEditorShow = !userEditorShow">
                                <img src="../assets/icons/cancle-red.svg" alt="no" style="width: 30px;">
                            </div>

                        </div>
                    </div>

                </div>

                <!-- 警告 -->
                <div v-show="alramShow">
                    <div class="mask" @click="alramShow = !alramShow"></div>
                    <div class="alram-box toast-box">

                        <div class="alram-show">
                            <img src="../assets/icons/alarm.svg" alt="警告" style="width: 40px;">
                            <p>{{ $t('biographyPage.alarmMsg') }}</p>
                            <div style="display: flex;   align-items: center;
                        justify-content: space-between;">
                                <img src="../assets/icons/ok-red.svg" @click="delArticle()" alt="ok" style="width: 30px;">
                                <img src="../assets/icons/cancle-gre.svg" @click="alramShow = !alramShow" alt="no"
                                    style="width: 30px;">
                            </div>

                        </div>
                    </div>
                </div>

            </div>
        </KeepAlive>
        <div class="box-2">
            <!-- 容器 -->
            <div class="article-box">
                <TransitionGroup name="article_list" tag="div">
                    <div v-for="article in articleStore.articleList.list" :key="article.article_id">
                        <div @click="goArticleDetails(article)">
                            <ArticleItem @alram="alramDel()" :article="article"></ArticleItem>
                        </div>

                    </div>
                </TransitionGroup>
            </div>
            <br>

        </div>
        <br>
        <br>

    </div>
</template>
<script setup lang="ts">
import { ref, reactive, onMounted } from "vue"
import { useRouter } from 'vue-router'
import { AuthStore } from '../store/authStore/index'
import { UserStore } from '../store/userStore/index'
import { uploadFILE } from '../api/file/index'
import { articleDel } from '../api/article/index'
import { ArticleStore } from '../store/articelStore/index'
const userStore = UserStore()
const authStore = AuthStore()
const userEditorShow = ref(false)
//背景图片
const imgShow = reactive({
    bgImg: true,
    avatar: true
})
//文章
const articleStore = ArticleStore()
const alramShow = ref(false)
const router = useRouter()
//用户信息修改
const userEditForm = reactive({
    "avatar": "",
    "career_tags": "",
    "nickname": "",
    "introduction": "",
    "background_image": ""
})
//文件上传对象
const avatarREF: any = ref(null)
const bgimageREF: any = ref(null)
//回到主页
function goHome() {
    router.push({
        path: 'home',
    })
}
//退出登陆
function goLoginOut() {
    authStore.loginOut()
    router.push({
        path: 'home',
    })
}
//警告
function alramDel() {
    alramShow.value = true;
}
//删除文章
async function delArticle() {
    try {
        console.log(articleStore.delArticleId)
        let res: any = await articleDel({ "article_id": articleStore.delArticleId })
        if (res.data.code === 200) {
            //获取文章列表
            getArticlesList();
            alramShow.value = false;
        }
    }
    catch (error) {
        console.log("删除失败")
    }


}

//文件上传
async function uploadFile(type: string) {
    try {
        if (type === "avatar" && avatarREF.value !== null) {
            const files: File[] = avatarREF.value.files;
            if (files[0].size > 10 * 1024 * 1024) {
                console.log("文件超过10Mb");
                avatarREF.value.value = null;
                return;
            }
            const res: any = await uploadFILE({ file: files[0] });
            console.log(res);
            userEditForm.avatar = res.data.data;

        } else if (type === "bgImg" && bgimageREF.value !== null) {
            const files: File[] = bgimageREF.value.files;
            if (files[0].size > 10 * 1024 * 1024) {
                console.log("文件超过10Mb");
                bgimageREF.value.value = null;
                return;
            }
            const res: any = await uploadFILE({ file: files[0] });
            if (res.data.code === 200) {
                userEditForm.background_image = res.data.data;
                upLoaduserForm();
                return
            }

        }
    } catch (error) {
        // 处理错误
        console.error(error);
        // 根据需要返回或执行其他操作
    }
}


//提交表单
function upLoaduserForm() {
    console.log(userEditForm)
    //上传文件
    userStore.pullUserEdit(userEditForm)
    userStore.getUserDetials();
    //关闭表单
    userEditorShow.value = false;
    //刷新页面
    window.setTimeout(function () {
        router.push({
            path: 'login',
        })
    }, 2000)



}

//文章详情页面
function goArticleDetails(article: any) {
     //直接存储，方便取
   articleStore.article_now = article
    router.push({
        path: 'articleDetails'
    })
}

//获取文章
async function getArticlesList() {
    await articleStore.getArticlesByUser();
}

//上传文章
function pullArticle() {
    router.push({
        path: 'editor', query: { "editType": "pullArticle" }
    })
}

// 创建项目
function pullProgram(){
    router.push({
        path: 'editProgram'
    })
}


// 获取列表
function getData() {
    if (userEditForm.nickname.length > 2) {
        return;
    }
    userStore.getUserDetials();
    //初始化表单
    userEditForm.career_tags = userStore.Detials.career_tags
    userEditForm.introduction = userStore.Detials.introduction
    userEditForm.avatar = userStore.Detials.avatar
    userEditForm.background_image = userStore.Detials.background_image
    userEditForm.nickname = userStore.Detials.nickname
    //获取文章列表
    getArticlesList();
}
getData();
onMounted(() => {
try{
        //判断图像是否存在，否则默认
        if (userEditForm.avatar.length < 8) {
            imgShow.avatar = false
        }
        if (userEditForm.background_image.length < 8) {
            imgShow.bgImg = false
        }
    }catch(error)
    {

    }

})
</script>
<style lang="scss" scoped>
.container-fluid {
    background-color: $passlink-bg-color;
    padding-top: 50px;
    min-height: 1000px;

    .box-bg {

        width: 100%;
        background-color: $passlink-bg-color;
        height: auto;
        margin: auto;

        .search-box {
            width: 100%;
            margin-top: 10px;
            margin-bottom: 30px;
            display: flex;
            justify-content: flex-end;

            input {
                width: 300px;

            }
        }

        .img-box {
            position: relative;
            width: 100%;
            color: $passlink-font-color-white;
            height: 500px;


            .return-btn {
                position: absolute;
                top: 5px;
                left: 5px;
                width: 200px;
                text-align: center;
                background-color: $passlink-font-color-yellow;
                font-size: $passlink-font-size18;

                img {
                    width: 24px;
                    height: 24px;
                }


            }

            .exit-btn {
                position: absolute;
                top: 25px;
                right: 5px;
                width: 200px;
                text-align: center;


                font-size: $passlink-font-size18;

                img {
                    width: 24px;
                    height: 24px;
                }
            }
            .pro-btn{
                position: absolute;
                top: 25px;
                right: 150px;
                width: 200px;
                text-align: center;
                font-size: $passlink-font-size18;
                img {
                    width: 24px;
                    height: 24px;
                }
                img:hover {
                    width: 26px;
                    height: 26px;
                }
            }

            .bg-img1 {
                position: absolute;
                width: 100%;
                height: 500px;
                left: 0;
                right: 0;
                top: 0;
                bottom: 0;
                z-index: 999;
                background: rgba(36, 36, 36, 0.53);

            }

            .bg-img2 {
                position: absolute;
                width: 100%;
                height: 500px;
                background-size: cover;
                left: 0;
                right: 0;
                top: 0;
                bottom: 0;
                z-index: 9;
                background-image: url('../assets/biogr/3454.png');

                backdrop-filter: blur(10px);
                filter: blur(5px);
            }

            .bg-img3 {
                position: absolute;
                width: 100%*0.9;
                height: 400px;
                background-repeat: no-repeat;
                background-size: cover;
                z-index: 99;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                opacity: 0.8;
                background-image: url('../assets/biogr/3454.png');
            }

            .font-box-1 {
                display: flex;
                position: absolute;
                color: $passlink-font-color-white;
                width: 800px;
                height: 120px;
                left: 200px;
                top: 150px;
                text-align: left;

                .detil-box {
                    margin-left: 20px;

                    p {
                        font-weight: bold;
                        font-size: $passlink-font-size18;
                    }

                    span {
                        font-weight: lighter;
                        font-size: $passlink-font-size14;
                    }
                }

                .circular-img {


                    img {
                        width: 100px;
                        height: 100px;
                        border: 1px solid $passlink-font-color-white;
                        border-radius: 100%;
                    }

                    .top-icon {
                        width: 100px;
                        height: 100px;
                        background-size: cover;
                        border-radius: 100%;

                        transition: all .5s;
                    }

                    .top-icon:hover {
                        padding: 3px;
                        box-shadow: 0 0 15px $passlink-font-color-white;
                    }

                    .top-icon:hover::before {
                        transition: all .5s;
                    }




                }
            }

            .font-box-2 {
                display: flex;
                position: absolute;
                color: $passlink-font-color-white;
                width: 800px;
                height: 24px;
                padding: 3px;
                left: 300px;
                top: 250px;
                text-align: left;
                align-items: center;

                .career-cards {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    text-align: center;
                    font-weight: lighter;
                    font-size: $passlink-font-size8;
                    padding-left: 5px;
                    padding-right: 5px;
                    margin-left: 20px;
                    width: auto;
                    height: 20px;
                    box-sizing: border-box;
                    border: 1px solid rgb(251, 255, 54);
                    border-radius: 20px;
                }
            }

            .font-box-3 {
                display: flex;
                position: absolute;
                color: $passlink-font-color-white;
                width: 800px;
                height: 60px;
                padding: 3px;
                left: 300px;
                top: 280px;
                text-align: center;
                align-items: center;
                justify-content: space-between;

                img {
                    width: 40px;
                    height: 40px;
                   
                }

                p {
                    margin: auto;
                    font-weight: lighter;
                    font-size: $passlink-font-size18;
                }

                button {
                    width: 200px;
                    border-radius: 40px;
                }
            }
        }

        .mask {
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            z-index: 9998;
            background-color: rgba(65, 65, 65, 0.6);
        }

        .toast-box {
            display: block;
            position: fixed;
            top: 20%;
            left: 50%;
            transform: translateX(-50%);
            background: none;
            z-index: 9999;

        }

        .card-input {
            height: auto;
            text-align: center;
            padding: 20px;
            width: 500px;
            height: auto;
            box-sizing: border-box;
            background: rgb(255, 255, 255);
            border: 2px solid rgba(255, 255, 255, 0.77);
            box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
            border-radius: 10px;

        }

        .alram-box {


            .alram-show {
                text-align: center;
                padding: 10px;
                margin: auto;
                z-index: 999;
                width: 250px;
                height: 150px;
                background: rgb(255, 255, 255);
                border-radius: 10px;
            }

        }

        .pagination-box {
            display: flex;
            justify-content: center;
            width: 175px;
            margin: auto;
        }

        .article-box {
            margin: auto;
            width: 100%;

            .article_list-move,
            /* 对移动中的元素应用的过渡 */
            .article_list-enter-active,
            .article_list-leave-active {
                transition: all 0.5s ease;
            }

            .article_list-enter-from,
            .article_list-leave-to {
                opacity: 0;
                transform: translateX(30px);
            }

            /* 确保将离开的元素从布局流中删除
  以便能够正确地计算移动的动画。 */
            .article_list-leave-active {
                position: absolute;
            }
        }

        .select-box {
            color: $passlink-font-color-white;
            display: flex;
            text-align: center;
            margin-bottom: 10px;

            h5:hover {
                color: $passlink-font-color-yellow;

            }

            .line-box-none {
                width: 100%;

            }

            .line-box-show {
                width: 100%;
                border-bottom: 2px solid $passlink-font-color-white;
            }

        }
    }

    .box-2 {
        width: 100%;
        display: flex;
        margin: auto;

        justify-content: center;
    }
}
</style>
